<script setup>
import {ref, onMounted,onBeforeUnmount,defineProps} from "vue"

const image1 = ref(null)
const image2 = ref(null)
const image3 = ref(null)
const image4 = ref(null)
const miniImage1 = ref(null)
const miniImage2 = ref(null)
const miniImage3 = ref(null)
const miniImage4 = ref(null)

let num = 0
let inter = null

let isImage1 = true
let isImage2 = true
let isImage3 = true
let isImage4 = true


let props = defineProps({
    image1:{type:String},
    image2:{type:String},
    image3:{type:String},
    image4:{type:String},
    image1Mini:{type:String},
    image2Mini:{type:String},
    image3Mini:{type:String},
    image4Mini:{type:String},
    miniWZ:{type:String}
})

onMounted(()=>{
    console.log(typeof(props.image1))
    inter = setInterval(()=>{
        if(num > 3){
            num = 0
        }
        num++
        switch(num){
            case 1:
                image1.value.style.transform = "translateX(-100%)"
                image2.value.style.transform = "translateX(-100%)"
                image3.value.style.transform = "translateX(-100%)"
                image4.value.style.transform = "translateX(-100%)"

                miniImage1.value.style.transform = "scale(1)"
                miniImage2.value.style.transform = "scale(1.1)"
                miniImage3.value.style.transform = "scale(1)"
                miniImage4.value.style.transform = "scale(1)"
                break
            case 2:
                image1.value.style.transform = "translateX(-200%)"
                image2.value.style.transform = "translateX(-200%)"
                image3.value.style.transform = "translateX(-200%)"
                image4.value.style.transform = "translateX(-200%)"

                miniImage1.value.style.transform = "scale(1)"
                miniImage2.value.style.transform = "scale(1)"
                miniImage3.value.style.transform = "scale(1.1)"
                miniImage4.value.style.transform = "scale(1)"
                break
            case 3:
                image1.value.style.transform = "translateX(-300%)"
                image2.value.style.transform = "translateX(-300%)"
                image3.value.style.transform = "translateX(-300%)"
                image4.value.style.transform = "translateX(-300%)"

                miniImage1.value.style.transform = "scale(1)"
                miniImage2.value.style.transform = "scale(1)"
                miniImage3.value.style.transform = "scale(1)"
                miniImage4.value.style.transform = "scale(1.1)"
                break
            default:
                image1.value.style.transform = "translateX(0)"
                image2.value.style.transform = "translateX(0)"
                image3.value.style.transform = "translateX(0)"
                image4.value.style.transform = "translateX(0)"

                miniImage1.value.style.transform = "scale(1.1)"
                miniImage2.value.style.transform = "scale(1)"
                miniImage3.value.style.transform = "scale(1)"
                miniImage4.value.style.transform = "scale(1)"
                break
        }
    },3000)
})

onBeforeUnmount(()=>{
    console.log('swiper1即将销毁')
    clearInterval(inter)
    inter = null
})

const mouseEnter = async(number) => {
    switch(number){
        case 1:
            num = 0
            image1.value.style.transform = "translateX(0%)"
            image2.value.style.transform = "translateX(0%)"
            image3.value.style.transform = "translateX(0%)"
            image4.value.style.transform = "translateX(0%)"

            miniImage1.value.style.transform = "scale(1.1)"
            miniImage2.value.style.transform = "scale(1)"
            miniImage3.value.style.transform = "scale(1)"
            miniImage4.value.style.transform = "scale(1)"
            break
        case 2:
            num = 1
            image1.value.style.transform = "translateX(-100%)"
            image2.value.style.transform = "translateX(-100%)"
            image3.value.style.transform = "translateX(-100%)"
            image4.value.style.transform = "translateX(-100%)"

            miniImage1.value.style.transform = "scale(1)"
            miniImage2.value.style.transform = "scale(1.1)"
            miniImage3.value.style.transform = "scale(1)"
            miniImage4.value.style.transform = "scale(1)"
            break
        case 3:
            num = 3
            image1.value.style.transform = "translateX(-200%)"
            image2.value.style.transform = "translateX(-200%)"
            image3.value.style.transform = "translateX(-200%)"
            image4.value.style.transform = "translateX(-200%)"

            miniImage1.value.style.transform = "scale(1)"
            miniImage2.value.style.transform = "scale(1)"
            miniImage3.value.style.transform = "scale(1.1)"
            miniImage4.value.style.transform = "scale(1)"
            break
        case 4:
            num = 4
            image1.value.style.transform = "translateX(-300%)"
            image2.value.style.transform = "translateX(-300%)"
            image3.value.style.transform = "translateX(-300%)"
            image4.value.style.transform = "translateX(-300%)"

            miniImage1.value.style.transform = "scale(1)"
            miniImage2.value.style.transform = "scale(1)"
            miniImage3.value.style.transform = "scale(1)"
            miniImage4.value.style.transform = "scale(1.1)"
            break
        default:
            break
    }
}

</script>

<template>
    <div class="all1">
        <div class="image1" ref="image1">
            <img :src="props.image1" alt="图片1" />
        </div>
        <div class="image2" ref="image2">
            <img :src="props.image2" alt="图片2" />
        </div>
        <div class="image3" ref="image3">
            <img :src="props.image3" alt="图片3" />
        </div>
        <div class="image4" ref="image4">
            <img :src="props.image4" alt="图片4" />
        </div>
    </div>
    <div class="all2Mini" :class="miniWZ">
        <div class="miniImage1" ref="miniImage1" @mouseenter="mouseEnter(1)">
            <img :src="props.image1Mini" alt="" />
        </div>
        <div class="miniImage2" ref="miniImage2" @mouseenter="mouseEnter(2)">
            <img :src="props.image2Mini" alt="" />
        </div>
        <div class="miniImage3" ref="miniImage3" @mouseenter="mouseEnter(3)">
            <img :src="props.image3Mini" alt="" />
        </div>
        <div class="miniImage4" ref="miniImage4" @mouseenter="mouseEnter(4)">
            <img :src="props.image4Mini" alt="" />
        </div>
        
    </div>
</template>

<style scoped>
.all1{
    width: 400%;
    height: 100%;
    display: flex;
    z-index: 2;
}
.image1,
.image2,
.image3,
.image4{
    width: 100%;
    height: 100%;
    /* transform: translateX(-100%); */
    transition: all 0.3s;
    z-index: 2;
}
.image1 img,
.image2 img,
.image3 img,
.image4 img{
    width: 100%;
    height: 100%;
    /* transform: translateX(-100%); */
    transition: all 0.3s;
    z-index: 2;
}

.ab{
    position: absolute;
    left: 0;
    height: 0;
}
.all2Mini{
    position: absolute;
    bottom: 5%;
    width: 100%;
    height: 40%;
    display: flex;
    align-items: center;
    /* background-color: red; */
    z-index: 999;
}
.miniImage1{
    margin-left: 5%;
    width: 20%;
    height: 80%;
    background: rgba(200, 200, 200, 0.5);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1.1);
}
.miniImage2,
.miniImage3,
.miniImage4{
    margin-left: 3%;
    width: 20%;
    height: 80%;
    background: rgba(200, 200, 200, 0.5);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.miniImage1 img,
.miniImage2 img,
.miniImage3 img,
.miniImage4 img{
    width: 96%;
    height: 93%;
    /* background-color: red; */
    border-radius: 15px;
}

</style>